<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Socket.IO Chat Example</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body> 
   
  <div class="header">
    <div class="header-box">
      <span class="nickname"></span>
      <img class="header-avatar" src="http://www.popochiu.com/images/avatar1.jpg">
    </div> 
  </div>
  <div class="chat">
    <div class="left"> 
      <ul>
        <li class="liselected"> 
            <div class="list-item">
                <img class="avatar" src="http://image.popochiu.com/32845622-3-thread_28272798_20200307142236_s_70454_o_w_690_h_1211_9965.png">
                <div class="inner-item">
                    <p class="nick">技术性调整</p>
                    <p class="last-chat">疯狂嘅Design 有 JPG </p>
                </div> 
            </div>
        </li>
        <li>
            <div class="list-item">
            <img class="avatar" src="http://image.popochiu.com/32845622-3-thread_28272798_20200307142236_s_70454_o_w_690_h_1211_9965.png">
            <div class="inner-item">
                <p class="nick">房间1</p>
                <p class="last-chat">疯狂嘅Design 有 JPG </p>
            </div> 
        </div>
    </li>
        <li><div class="list-item">
            <img class="avatar" src="http://image.popochiu.com/32845622-3-thread_28272798_20200307142236_s_70454_o_w_690_h_1211_9965.png">
            <div class="inner-item">
                <p class="nick">房间2</p>
                <p class="last-chat">疯狂嘅Design 有 JPG </p>
            </div> 
        </div></li>
        <li><div class="list-item">
            <img class="avatar" src="http://image.popochiu.com/32845622-3-thread_28272798_20200307142236_s_70454_o_w_690_h_1211_9965.png">
            <div class="inner-item">
                <p class="nick">房间3</p>
                <p class="last-chat">疯狂嘅Design 有 JPG </p>
            </div> 
        </div></li>
        <li><div class="list-item">
            <img class="avatar" src="http://image.popochiu.com/32845622-3-thread_28272798_20200307142236_s_70454_o_w_690_h_1211_9965.png">
            <div class="inner-item">
                <p class="nick">房间4</p>
                <p class="last-chat">疯狂嘅Design 有 JPG </p>
            </div> 
        </div></li>
      </ul>
     </div>
     <div class="right">
         <header>
            <h1 class="chat-title">技术性调整</h1>
         </header>
         <div class="content-box">
            <ul>
                <!-- <li class="msg-left">
                    <div class="msg-left-box">
                        <img class="avatar" src="http://image.popochiu.com/heart.png">
                        <div class="msg-left-content">
                          <p>Benjamin</p>
                          <div class="msg-content left-triangle">金鱼缸笠头十足怪物小王子5</div>
                        </div>
                        
                    </div>
                </li>

                <li class="msg-right">
                    <div> 
                        <div class="msg-content right-triangle">金鱼缸笠头十足怪物小王子 5
                        </div>
                        <img class="avatar" src="../pictures/bg_default.png">
                    </div>
                </li>  --> 
            </ul>
         </div>
         <footer class="input-box">
            <div class="tools">

            </div>
            <div class="input">
                <textarea  placeholder="..." name="" id="inputMessage" cols="30" rows="9"></textarea>
            </div>
            <div class="buttons">
                <button id="submit">发送</button>
            </div>
         </footer>
       
     </div>
  </div> 

 
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="/javascripts/socket.io.js"></script>
  <script src="/main.js"></script>
  <script src="/notification.js"></script>

  <script >
    var notification = new Notice();
    //notification.sendNotification('hello',{body: '@ionic-native/app-minimize@4.20.0 requires a peer of rxjs@^5.5.11 but none is installed. You must install peer dependencies yourself.'},()=>{
     // console.log('onclicked')
     // window.open('https://www.baidu.com')
    //})

    document.addEventListener("visibilitychange", function() {
      console.log(document.visibilityState);
      if(document.visibilityState == "hidden") {
          console.log('隐藏');
      } else if (document.visibilityState == "visible") {
          console.log('显示')
      }
  });
  </script>
</body>
</html>